<template>
  <Card>
    <p slot="title">发送消息</p>
    <Form ref="formInline" :model="formInline" :label-width="90" :rules="ruleInline">
      <Row>
        <Col span="10">
          <Row>
            <FormItem prop="title" label="消息标题">
              <Input type="text" v-model="formInline.title" placeholder="请输入消息标题" />
            </FormItem>
          </Row>

          <Row>
            <FormItem  label="收件人">
              <Select @on-change="chooseAddressee" v-model="formInline.addressee_id" style="width:200px">
                <Option
                  v-for="item in users"
                  :value="item.account_id"
                  :key="item.id"
                >{{ item.info.username }}</Option>
              </Select>
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="content" label="消息内容">
              <Input
                type="textarea"
                :rows=6
                v-model="formInline.content"
                placeholder="请填写消息内容"
              />
            </FormItem>
          </Row>
        </Col>
      </Row>

      <FormItem>
        <Button type="primary" @click="handleSubmit('formInline')">确定</Button>
        <Button type="success" @click="cancle()" style="margin-left:20px;">取消</Button>
      </FormItem>

    </Form>
  </Card>
</template>

<script>

export default {
  data() {
    return {
      users: [],
      formInline: {
        title: "",
        content: "",
        addressee_id: "",
      },
      ruleInline: {
        title: [
          { required: true, message: "请填写标题", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        addressee: [
          { required: true, message: "请选择收件人", trigger: "blur" },
          {
            type: "string",
            message: "请选择收件人",
            trigger: "blur"
          }
        ],
        content: [
          { required: true, message: "请填写消息内容", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "请填写消息内容",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    chooseAddressee(value) {
        this.formInline.addressee_id = value
    },
    "cancle":function() {
        this.formInline = {
        title: "",
        content: "",
        addressee_id: "",
      }
    },
    handleSubmit:function(name) {
         this.$refs[name].validate(valid => {
             if(valid) {
                 this.$Modal.confirm({
                    title: `确认发送该消息？`,
                    onOk: () => {
                        this.jsonrpc.contribute.user.sendMessage(this.formInline).then(res=> {
                            if(res) {
                                this.$Message.success("发送成功");
                                this.cancle();
                            }
                        }).catch(error=> {
                            this.$Message.error("请稍后重试")
                        })
                    }
                 })
             }
         })
    }
  },
  mounted() {
    this.jsonrpc.contribute.user.getUsers().then(res => {
      this.users = res;
    });
  }
};
</script>

<style lang="stylus" scoped></style>